import * as THREE from 'three'
import { Line2 } from 'three/examples/jsm/lines/Line2.js'
// import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
import { transfromGeoJSON } from '../utils'
import { Component } from '@/libs/mini3d'
import { geoMercator } from 'd3-geo'
import allConfig from '@/config'
let geoProjection = geoMercator().center(allConfig.center).scale(600).translate([0, 0])  // 将经纬度转投影成坐标
/**
 * 网格地面
 */
export class Line extends Component {
  /**
   *
   * @param {*} base this
   * @param {*} config
   */
  constructor(base, config = {}) {
    super(base)
    this.config = Object.assign(
      {
        data: '', // 数据
        material: new THREE.LineBasicMaterial({ color: 0xffffff }), // LineBasicMaterial | LineMaterial
        type: 'LineLoop', // 线类型：LineLoop | Line2
        renderOrder: 1,
      },
      config,
    )

    let mapData = transfromGeoJSON(this.config.data)
    if (config.isChina) {
      geoProjection = geoMercator().center(allConfig.center).scale(17).translate([0, 0])  // 将经纬度转投影成坐标
    } else {
      geoProjection = geoMercator().center(allConfig.center).scale(120).translate([0, 0])  // 将经纬度转投影成坐标
    }
    let lineGroup = this.create(mapData)
    this.lineGroup = lineGroup
  }
  create(data) {
    console.log('线开始created了', new Date())
    const { type } = this.config
    let features = data.features
    let lineGroup = new THREE.Group()
    lineGroup.name = this.config.name
    for (let i = 0; i < features.length; i++) {
      const element = features[i]
      if (element.properties.name === allConfig.provinceName && !this.config.isChina) {
        continue
      }
      element.geometry.coordinates.forEach(coords => {
        const points = []
        let line = null

        if (type === 'Line2') {
          coords[0].forEach(item => {
            const [x, y] = geoProjection(item)
            points.push(x, -y, 0)
          })
          line = this.createLine2(points)
        } else {
          coords[0].forEach((item, idx) => {
            const [x, y] = geoProjection(item)
            points.push(new THREE.Vector3(x, -y, 0))
            if (idx% 5 == 0) {
              line = this.createLine(points)
            }
          })
        }
        // 将线条插入到组中
        line.name = element.properties.name
        lineGroup.add(line)
      })
    }
    console.log('线created完了', new Date())
    return lineGroup
  }
  createLine2(points) {
    const { material, renderOrder } = this.config
    const geometry = new LineGeometry()
    geometry.setPositions(points)
    let line = new Line2(geometry, material)
    line.name = 'mapLine2'
    line.renderOrder = renderOrder
    line.computeLineDistances()
    return line
  }
  createLine(points) {
    const { material, renderOrder} = this.config
    const geometry = new THREE.BufferGeometry()
    geometry.setFromPoints(points)
    let line = new THREE.LineLoop(geometry, material)
    line.renderOrder = renderOrder
    line.name = 'mapLine'
    return line
  }
  join() {
    this.lineGroup.name = '初始化的线'
    this.base.scene.add(this.lineGroup)
  }
}
